<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="joys-home-page" >
    <div  class="styleBox" id="page-div">
      <div v-if="editable" class="joys-home-page__dashboard-toolbar" :class="{'boxStyle':showBox}">

          <!--<div class="home-page-alert" v-if="alert">-->
            <!--&lt;!&ndash;<el-alert class="alert-title" title="点击保存将把当前工作台保存为自定义工作台，且设置为当前用户默认工作台。" iconClass="joys-icon-messagestips"  show-icon :closable="false"></el-alert>&ndash;&gt;-->
            <!--<div class="alert-title">-->
              <!--<i style="margin: 0 10px 0 18px" class="joys-icon-messagestips"></i>-->
              <!--<span>-->
          <!--点击保存将把当前工作台保存为自定义工作台，且设置为当前用户默认工作台。-->
          <!--</span>-->
            <!--</div>-->
          <!--</div>-->
        <!--<transition name="slide-fade">-->
          <!--<el-row class="home-page-dashboard" v-if="!alert">-->

            <!--<el-button type="primary" size="small" style="height: 28px;width: 56px;margin: 0 48px 0 0;padding: 0"-->
                       <!--@click="cancel">取消-->
            <!--</el-button>-->
            <!--<el-button type="primary" size="small" style="height: 28px;width: 56px;margin: 0;padding: 0"-->
                       <!--@click="saveDashboard">保存-->
            <!--</el-button>-->
          <!--</el-row>-->
        <!--</transition>-->
        <div class="dashboard-tool">
          <div class="dashboard-tool-name" style="margin-top: 24px">
            <!--<span style="color:#f56c6c;">*</span>-->
            <span class="dashboard-tool-span">工作台名称</span>
            <el-input :disabled="!editable" v-model="dashboard.dashboardName" id="dashboard-tool-input"></el-input>
          </div>
          <div class="dashboard-tool-mode">
            <span class="dashboard-tool-span">自定义工作模块 </span>
            <dashboard-widget-select v-model="applets" class="dashboard-select"
                                     @returnApplet="changeWidget"></dashboard-widget-select>
            <div class="home-page-alert" v-if="alert" style="display: inline-block">
              <div class="alert-title">
                <i style="margin: 0 10px 0 18px" class="joys-icon-messagestips"></i>
                <span>点击保存将把当前工作台保存为自定义工作台，且设置为当前用户默认工作台。 </span>
              </div>
            </div>
            <transition name="slide-fade" >
              <el-row class="home-page-dashboard" style="display:inline-block" v-if="!alert">
                <el-button type="primary" size="small" style="height: 28px;width: 56px;margin: 0 48px 0 0;padding: 0"
                           @click="cancel">取消
                </el-button>
                <el-button type="primary" size="small" style="height: 28px;width: 56px;margin: 0;padding: 0"
                           @click="saveDashboard">保存
                </el-button>
              </el-row>
            </transition>
          </div>

        </div>
      </div>
      <div v-if="editable" class="titlebox"></div>
      <dashboard  :editable="editable" :widgets="widgets"></dashboard>
    </div>
    <ft-dialog width="400px" title="可选工作台" :visible="dashboardsDlgVisible" @close="cancelSelect">
      <el-radio-group v-model="selectedDashboardId">
        <div style="padding: 15px 25px 0 25px;text-align: left" v-for="dash in availableDashboards">
          <el-radio :label="dash.dashboardId">{{dash.dashboardName}}</el-radio>
        </div>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="applyDefault">确 定</el-button>
        <el-button size="small" @click="cancelSelect">取 消</el-button>
      </div>
    </ft-dialog>
  </div>
</template>

<script>
  import Dashboard from './Dashboard'
  import {mapMutations} from 'vuex'
  import DashboardWidgetSelect from "./DashboardWidgetSelect";

  export default {
    components: {DashboardWidgetSelect, Dashboard},
    name: "HomePage",
    props: ['exActionCmd'],
    mounted() {
      this.loadDashboard()
      window.addEventListener('scroll',  this.checkDivScroolTop())

    },
    destroyed() {
      // this.setExActions([])
    },
    data() {
      return {
        editable: false,
        dashboard: null,
        iframeToLoad: false,
        widgets: [],
        dashboardsDlgVisible: false,
        availableDashboards: [],
        selectedDashboardId: null,
        optionalDashboardsAction: {
          name: '可选工作台',
          iconClass: '',
          command: 'OPTIONAL_DASHBOARDS',
          listener: this,
          disabled: false
        },
        startDesignDashboardAction: {
          name: '自定义工作台',
          divided: true,
          iconClass: '',
          command: 'DESIGN_DASHBOARD_START',
          listener: this,
          disabled: false,
        },
        alert: true,
        applets: [],
        showBox:true
      }
    },
    watch: {
      editable() {
        if (this.editable) {
          this.startDesignDashboardAction.disabled = true
        } else {
          this.startDesignDashboardAction.disabled = false
          this.alert = true
        }
      },
      //工作台按钮监控
      exActionCmd: {
        handler(val) {
          this.onActionPerformed(val)
        }
      },
      widgets() {
        this.applets = []
        for (let j in this.widgets) {
          const widget = this.widgets[j]
          if (this.applets.indexOf(widget.appletId) < 0) {
            this.applets.push(widget.appletId)
          }
        }
      }
    },
    methods: {
      ...mapMutations(['setExActions']),
      onActionPerformed(cmd) {
        // this.$message({
        //   duration: 0,
        //   message: '这是一条消息提示'
        // });
        if (cmd === 'DESIGN_DASHBOARD_START') {
          this.editable = true
          this.changeAlert()
        } else if (cmd === 'OPTIONAL_DASHBOARDS') {
          if (this.dashboard) {
            this.selectedDashboardId = this.dashboard.dashboardId
          }
          this.loadAvailableDashboards()
          this.dashboardsDlgVisible = true
        }
        if (cmd) {
          this.$emit('setInitCmd')
        }
      },
      changeAlert() {
        this.alert = false
      },
      loadDashboard() {
        this.$http.get('/joys-rest/joys-admin/dashboards/default').then(resp => {
          this.dashboard = resp.data.dashboard
          this.widgets = resp.data.widgets
          this.selectedDashboardId = this.dashboard.dashboardId
          // this.setExActions([this.optionalDashboardsAction, this.startDesignDashboardAction])
          if (this.iframeToLoad) {
            this.iframeLoad()
          }
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      loadAvailableDashboards() {
        this.$http.get('/joys-rest/joys-admin/dashboards/available').then(resp => {
          this.availableDashboards = resp.data
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      saveDashboard() {
        if (!this.dashboard.dashboardName) {
          this.$message.warning("工作台名称不能为空")
          return
        }
        if (!this.widgets.length) {
          this.$message.warning("请设计布局")
          return
        }
        this.editable = false
        if (this.dashboard.dashboardType === 'SHARED') {
          this.dashboard.dashboardId = null
          this.dashboard.dashboardType = 'PERSONAL'
        }
        this.$http.post('/joys-rest/joys-admin/dashboards/saveAsDefault', {
          dashboard: this.dashboard,
          widgets: this.widgets
        }).then(resp => {
          this.dashboard = resp.data.dashboard
          this.widgets = resp.data.widgets
          this.iframeLoad()
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      cancel() {
        this.editable = false
        this.iframeToLoad = true
        this.loadDashboard()
      },
      // 首页 编辑个人工作台- 保存、取消时，iframe加载动画是否生效
      iframeLoad() {
        if (this.widgets) {
          for (let i = 0; i < this.widgets.length; i++) {
            this.widgets[i].load = true
          }
        }
      },
      applyDefault() {
        this.$http.post('/joys-rest/joys-admin/dashboards/setDefaultDashboard', this.selectedDashboardId,
          {
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }).then(resp => {
          this.iframeToLoad = true
          this.loadDashboard()
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
        this.dashboardsDlgVisible = false
      },
      cancelSelect() {
        this.selectedDashboardId = this.dashboard.dashboardId
        this.dashboardsDlgVisible = false
      },
      //应用选择器选择应用
      changeWidget(value) {
        if (value.add) {//增加部件
          let maxY = 0
          let maxI = 0
          for (let i in this.widgets) {
            const widget = this.widgets[i]
            if (widget.y >= maxY) {
              maxY = widget.y + widget.h
            }
            if (widget.i >= maxI) {
              maxI = widget.i + 1
            }
          }
          this.widgets.push({
            x: 0,
            y: maxY,
            w: 8,
            h: 3,
            i: maxI,
            appletId: value.appletId,
            routeUrl: value.routeUrl
          })
        } else {//删除部件
          for (let j in this.widgets) {
            const widget = this.widgets[j]
            if (widget.appletId === value.appletId) {
              this.widgets.splice(j, 1)
              break
            }
          }
        }
      },
      checkDivScroolTop() {
        //获取节点
        var scrollDiv = document.getElementById('page-div');
        //绑定事件
        // scrollDiv.addEventListener('scroll', () => {
        //   var scrollHeight = scrollDiv.scrollHeight
        //   var clientHeight = scrollDiv.clientHeight
        //   var scrollTop = scrollDiv.scrollTop
        //   console.log(scrollTop)
        // });
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.getElementById('page-div').clientHeight
        console.log(scrollTop)
      },


    }
  }
</script>
<style>
  .joys-home-page {
    padding: 0 14px 0 24px;
  }

  .home-page-alert {
    display: flex;
    justify-content: center;
    position: relative;
    padding-top: 24px;
    margin-bottom: 10px;
  }

  .alert-title {
    background: #F1F1F3;
    border-radius: 2px;
    width: 544px;
    height: 42px;
    line-height: 42px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #919398;
    letter-spacing: 0;
    text-align: center;
  }

  .joys-home-page__dashboard-toolbar {
    /*text-align: left;*/
    padding: 0 0 24px 0;
    background-color: #FFFFFF;
    height: 90px;
    position: fixed;
    /*width: 100%;*/
    left: 24px;
    right: 16px;
    z-index: 2024;
  }

  .boxStyle {
    /*box-shadow: 0px 5px 1px #888888;*/
    box-shadow: 0px 5px 1px #f4f8f9;
  }
  .styleBox {
    height: 100%;
  }

  .styleBox .titlebox {
    height: 90px;
  }

  .home-page-dashboard {
    text-align: center;
    margin: 0 0 24px 0;
    padding-top: 24px;
  }

  .joys-home-page__dashboard-toolbar .el-alert {
    padding: 6px 16px;
  }

  .joys-home-page .ft-dialog .el-dialog__body {
    text-align: center;
  }

  .dashboard-tool {
    height: 32px;
    line-height: 32px;
  }

  .dashboard-tool-name {
    margin-right: 30px;
    margin-left: 36px;
    display: inline-block;
    float: left
  }

  .dashboard-tool-name .el-input{
    width: 156px;
  }
  .dashboard-tool-span {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #8C8C8C;
    letter-spacing: 0;
    text-align: right;
    margin-right: 8px;
  }

  #dashboard-tool-input {
    width: 156px;
  }

  #dashboard-tool-input >>> .el-input__inner {
    height: 32px;
    line-height: 32px;
    width: 156px;
  }

  .dashboard-tool-mode {
    height: 32px;
    line-height: 32px;
  }

  .dashboard-select {
    display: inline-block;
  }

  /***渐变动画**/
  .slide-fade-enter-active {
    transition: all 1.8s ease;
  }

  .slide-fade-leave-active {
    transition: all 1.8s cubic-bezier(1.0, 1.5, 1.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateY(-1px);
    opacity: 0;
  }

</style>
